<template>
    <div class="editBox">
        <!-- 头部 -->
        <EditRoleHead title="编辑角色" :btnArr="storeBtn" myIndex = 0 :fn="toEdiRoleManage"></EditRoleHead>
        <!-- 内容区域 -->
        <EditRoleItem  :ruleForm="ruleForm">
          <template #fnRange>
            <el-form-item label="功能范围" prop="fnRange">
              <el-input v-model="ruleForm.fnRange"></el-input>
            </el-form-item>
          </template>
        </EditRoleItem>
    </div>
</template>

<script>
import EditRoleItem from './EditRoleItem'
import EditRoleHead from "../payroll/operationPayrollTitle";
export default {
  components: {
    EditRoleHead,
    EditRoleItem
  },
  data() {
    return {
      storeBtn: ["保存"],
      ruleForm: {
        fnRange:"",
        roleName:"",
      },
    };
  },
  mounted() {
    //更新ruleForm的fnRange和roleName
    this.ruleForm.fnRange = this.$store.state.ruleForm.functionRange
    this.ruleForm.roleName = this.$store.state.ruleForm.roleName
  },
  methods: {
    toEdiRoleManage(){
      //传递fnRange和roleName的值到store里面去重新赋值
      this.$store.commit("changeRole",[this.ruleForm.fnRange,this.ruleForm.roleName]) 
      this.$router.push({path:"/home/rolemanage"}) //跳转到角色管理页面
    }
  },
};
</script>

<style lang="less" scoped>
.editBox{
    height: 100%;
    background-color: #fff;
}
/deep/.form{
    margin-top: 20px;
}
/deep/.el-input{
    width: 600px;
    height: 30px;
    line-height: 30px;
}
/deep/.el-input__inner{
    height: 30px;
    line-height: 30px;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::before {
    content: none;
}
/deep/.el-form-item {
    margin-bottom: 22px;
    margin-left: 240px;
    width: 600px;
}
</style>